<template>
  <div class="box">
    <!--头部-->
    <header>
      <div class="page_shuoming">
        <el-header style="height: 110px;background-color: white">
          <div class="permission_text">商品入库</div>
          <div class="Breadcrumb"><span>首页</span><span>/</span><span>商品入库</span></div>
        </el-header>
      </div>
    </header>


    <!--表格-->
    <div class="table_pad">
      <el-main style="height: 700px;width:98%; background-color: white">
        <!--main的名字-->
        <div><span class="subhead">商品入库</span></div>
        <div class="line"></div>
        <div class="button-area">
          <el-button @click="create_chailiao" type="primary">创建商品入库</el-button>
          <el-button type="success" @click="search">&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
        </div>
        <!--tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)-->


        <!--创建商品采购退货-->
        <div class="select" style="background-color: white;margin-top: 10px" v-if="!material_list">
          <h2>新增商品入库</h2>
          <table>
            <tr>
              <td>
                <el-select v-model="leixing_value" style="width: 200px" placeholder="商品类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <td>
                <el-select v-model="chukumendian_val" style="width: 200px" placeholder="入库门店">
                  <el-option
                    v-for="item in chukumendian"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <td>
                <el-select v-model="chukuguitai_val" style="width: 200px" placeholder="入库柜台">
                  <el-option
                    v-for="item in chukuguitai"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <td>
                <el-input placeholder="创单日期" v-model="chuangdanriqi"></el-input>
              </td>
              <td>
                <el-input placeholder="单据编号" v-model="danjubianhao"></el-input>
              </td>
              <td>
                <el-button class="select_chailiao" type="primary" size="small" @click="select_chailiao"
                           :disabled="leixing_value.length==0||chukumendian_val.length==0||chukuguitai_val.length==0">
                  选择商品
                </el-button>
                <el-button class="wancheng_chailiao" type="success" size="small" @click="wancheng_chailiao">完成选择
                </el-button>
              </td>
            </tr>
          </table>
        </div>

        <!--创建商品中的选择拆料点击后显示的商品库存统计列表-->
        <el-table
          :data="kucuntongji.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)"
          border
          style="width: 100%"
          v-if="chailiao_click_kucunshow"
          v-loading="loading"
          @selection-change="tongji_chailiao_changeFun"
        >
          <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
          <el-table-column v-for="item in TongjitableName" :prop="item.prop" :label="item.label" width="120"
                           align="center">
          </el-table-column>
        </el-table>

        <!--分页-->
        <div class="block">
          <el-pagination v-if="chailiao_click_kucunshow"
                         @current-change="handleCurrentChange1"
                         @size-change="handleSizeChange1"
                         :current-page="currentPage1"
                         :page-sizes="[1, 2, 3, 4]"
                         :page-size="pageSize1"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="kucuntongji.length">
          </el-pagination>
        </div>

        <!--查询框-->
        <div class="select" style="background-color: white;margin-top: 10px" v-if="chaxun">
          <h2>查询</h2>
          <table>
            <tr>
              <td>
                <el-select v-model="leixing_value" style="width: 200px" placeholder="商品类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <td>
                <el-select v-model="chukumendian_val" style="width: 200px" placeholder="入库公司">
                  <el-option
                    v-for="item in chukumendian"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <td>
                <el-select v-model="chukuguitai_val" style="width: 200px" placeholder="入库柜台">
                  <el-option
                    v-for="item in chukuguitai"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <td>
                <el-input placeholder="创单人" v-model="chuangdanren"></el-input>
              </td>
              <td>
                <el-button style="margin-left: 10px" type="primary" @click="click_sreach"
                           :disabled="leixing_value.length==0||chukumendian_val.length==0||chukuguitai_val.length==0"
                >点击搜索
                </el-button>
                <el-button type="success" @click="click_shouqi">收起</el-button>
              </td>
              <td>
              </td>
            </tr>
          </table>
        </div>

        <!--拆料首页列表-->
        <el-table
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          border
          style="width: 100%"
          v-if="material_list"
          v-loading="loading_chailiaolist"
          @selection-change="chailiao_changeFun"
        >
          <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
          <el-table-column v-for="item in tableName" :prop="item.prop" :label="item.label" width="120" align="center">
          </el-table-column>
          <template>
            <el-table-column
              prop="操作"
              label="操作"
              width="300" align="center"
              fixed="right">
              <template slot-scope="scope">
                <el-button type="info" v-if="chexiao_shenpi_id.indexOf(scope.row.id)==-1&&quanxianshenhe" title="审核"
                           size="mini"
                           @click="handleClick_shenpi(scope.row);openTanChuang_shenpi()"
                           :disabled="shenpi_id.indexOf(scope.row.id)!=-1">审核
                </el-button>
                <!--chexiao_bohui(scope.row.id);-->
                <el-button type="info" v-if="chexiao_shenpi_id.indexOf(scope.row.id)!=-1&&quanxianshenhe"
                           @click="chexiao_open(scope.row.id)" title="撤消驳回" size="mini">撤消驳回
                </el-button>
                <el-button type="primary" @click="handleClick_edit(scope.row);openTanChuang_edit()" v-if="edit_Features"
                           size="mini">编辑
                </el-button>
                <el-button type="danger" title="" size="mini" @click="shanchu_open(scope.row.id)"
                           v-if="delete_Features" :disabled="shenpi_id.indexOf(scope.row.id)!=-1">删除
                </el-button>
              </template>
            </el-table-column>
          </template>
        </el-table>


        <!--分页-->
        <div class="block" v-if="material_list">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="currentPage"
            :page-sizes="[1, 2, 3, 5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </div>
      </el-main>

      <!--编辑弹窗-->
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <table>
            <tr>
              <td class="shenpi_td_jian">行号:</td>
              <td class="shenpi_td_zhi">
                <el-input disabled v-model="form.hanghao" autocomplete="off"
                          style="width: 150px;margin-left: 10px"></el-input>
              </td>
              <td class="shenpi_td_jian">重量:</td>
              <td class="shenpi_td_zhi">
                <el-input v-model="form.weight" autocomplete="off" style="width: 150px;margin-left: 10px"></el-input>
              </td>
              <td class="shenpi_td_jian">状态:</td>
              <td class="shenpi_td_zhi">
                <el-input disabled v-model="form.status" autocomplete="off"
                          style="width: 150px;margin-left: 10px"></el-input>
              </td>
            </tr>
            <tr>
              <td class="shenpi_td_jian">单据编号:</td>
              <td class="shenpi_td_zhi">
                <el-input v-model="form.danjubianhao" autocomplete="off"
                          style="width: 150px;margin-left: 10px"></el-input>
              </td>
              <td class="shenpi_td_jian">总部名称:</td>
              <td class="shenpi_td_zhi">
                <el-input disabled v-model="form.zongbumingcheng" autocomplete="off"
                          style="width: 150px;margin-left: 10px"></el-input>
              </td>
              <td class="shenpi_td_jian">分店:</td>
              <td class="shenpi_td_zhi">
                <el-input disabled v-model="form.fendian" autocomplete="off"
                          style="width: 150px;margin-left: 10px"></el-input>
              </td>
            </tr>
            <tr>
              <td class="shenpi_td_jian">类库名称:</td>
              <td class="shenpi_td_zhi">
                <el-input v-model="form.leikumingcheng" autocomplete="off"
                          style="width: 150px;margin-left: 10px"></el-input>
              </td>
              <td class="shenpi_td_jian">创单人:</td>
              <td class="shenpi_td_zhi">
                <el-input v-model="form.chuangdanren" disabled autocomplete="off"
                          style="width: 150px;margin-left: 10px"></el-input>
              </td>
              <td class="shenpi_td_jian">创单日期:</td>
              <td>
                <el-input v-model="form.chuangdanriqi" autocomplete="off"
                          style="width: 150px;margin-left: 10px"></el-input>
              </td>
            </tr>
          </table>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeTanChuang_edit">取 消</el-button>
          <el-button type="primary" @click="closeTanChuang_edit();queren_edit()">确 定</el-button>
        </div>
      </el-dialog>

      <!--审批弹窗-->
      <el-dialog class="shenpi" title="审批" style="color: #409EFF" :visible.sync="dialogFormVisible_shenpi">
        <el-form :model="shenpi">
          <table>
            <tr>
              <td class="shenpi_td_jian">行号:</td>
              <td class="shenpi_td_zhi">{{shenpi.hanghao}}</td>
              <td class="shenpi_td_jian">重量:</td>
              <td class="shenpi_td_zhi">{{shenpi.weight}}</td>
              <td class="shenpi_td_jian">状态:</td>
              <td class="shenpi_td_zhi">{{shenpi.status}}</td>
            </tr>
            <tr>
              <td class="shenpi_td_jian">单据编号:</td>
              <td class="shenpi_td_zhi">{{shenpi.danjubianhao}}</td>
              <td class="shenpi_td_jian">总部名称:</td>
              <td class="shenpi_td_zhi">{{shenpi.zongbumingcheng}}</td>
              <td class="shenpi_td_jian">分店:</td>
              <td class="shenpi_td_zhi">{{shenpi.fendian}}</td>
            </tr>
            <tr>
              <td class="shenpi_td_jian">类库名称:</td>
              <td class="shenpi_td_zhi">{{shenpi.leikumingcheng}}</td>
              <td class="shenpi_td_jian">数量:</td>
              <td class="shenpi_td_zhi">{{shenpi.shuliang}}</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeTanChuang_shenpi();shenpi_tongguo(shenpi.id)">通过</el-button>
          <el-button type="danger" @click="closeTanChuang_shenpi();shenpi_bohui(shenpi.id)">驳回</el-button>
          <el-button type="info" @click="closeTanChuang_shenpi()">取消</el-button>
        </div>
      </el-dialog>

      <!--明细弹窗-->
      <el-dialog title="拆料明细" :visible.sync="dialogFormVisible_mingxi">
        <el-form :model="chailiaomingxi_list">
          <!--活动名称:-->
          <!--<el-input v-model="chailiaomingxi_list.name" autocomplete="off" style="width: 150px;margin-left: 10px"></el-input>-->
          <!--活动名称:-->
          <!--<el-input v-model="form.name" autocomplete="off" style="width: 150px;margin-left: 10px"></el-input>-->
          <h1>暂无数据</h1>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeChuang_mingxi">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import store from "../../vuex/index"

  export default {
    name: "commodity_material",
    data() {
      return {
        tableData: [],
        kucuntongji: [],
        tableName: [
          {prop: "hanghao", label: "行号"},
          {prop: "weight", label: "重量"},
          {prop: "status", label: "状态"},
          {prop: "danjubianhao", label: "单据编号"},
          {prop: "zongbumingcheng", label: "总部名称"},
          {prop: "fendian", label: "分店"},
          {prop: "leikumingcheng", label: "类库名称"},
          {prop: "fendian", label: "分店"},
          {prop: "guitai", label: "柜台"},
          {prop: "chuangdanren", label: "创单人"},
          {prop: "chuangdanriqi", label: "创单日期"}
        ],
        loading: true,
        loading_chailiaolist: true,
        //商品统计的tableName
        TongjitableName: [
          {prop: "hanghao", label: "行号"},
          {prop: "weight", label: "重量"},
          {prop: "status", label: "状态"},
          {prop: "danjubianhao", label: "单据编号"},
          {prop: "zongbumingcheng", label: "总部名称"},
          {prop: "fendian", label: "分店"},
          {prop: "leikumingcheng", label: "类库名称"},
          {prop: "chuangdanriqi", label: "创单日期"},
          {prop: "guitai", label: "柜台"}
        ],

        //分页
        currentPage: 1,
        pageSize: 5,
        currentTotal: 0,
        //创建商品中的选择拆料点击后显示的商品库存统计列表
        currentPage1: 1,
        pageSize1: 5,
        currentTotal1: 0,
        //表格显示隐藏
        material_list: true,
        options: [
          {
            value: '素金类',
            label: '素金类'
          },
          {
            value: '镶嵌类',
            label: '镶嵌类'
          }],
        leixing_value: '',
        chukumendian: [
          {
            value: '总公司',
            label: '总公司'
          },
          {
            value: '上海分公司',
            label: '上海分公司'
          }
        ],
        chukumendian_val: '',
        chukuguitai_val: "",
        chukuguitai: [
          {
            value: '柜台1',
            label: '柜台1'
          },
          {
            value: '柜台2',
            label: '柜台2'
          }
        ],
        chuangdanriqi: "",
        danjubianhao: "",
        chailiao_click_kucunshow: false,
        //拆料页面多选数组
        multipleSelection: [],
        //商品统计的多选数组
        tongji_multipleSelection: [],
        // dialogTableVisible: false,
        dialogFormVisible: false,
        dialogFormVisible_shenpi: false,

        //编辑时的数据
        form: {
          "hanghao": "",
          "weight": "",
          "status": "",
          "danjubianhao": "",
          "zongbumingcheng": "",
          "leikumingcheng": "",
          "fendian": "",
          "guitai": "",
          "chuangdanren": "",
          "chuangdanriqi": ""
        },
        formLabelWidth: '100px',
        //审批弹窗数据
        //将键换为当前页面需要展示的数据名称
        shenpi: {
          hanghao: '',
          weight: "",
          status: "",
          danjubianhao: "",
          zongbumingcheng: "",
          fendian: "",
          leikumingcheng: "",
          id: ""
        },
        shenpi_id: [],
        chexiao_shenpi_id: [],
        chaxun: false,
        dialogFormVisible_mingxi: false,
        chailiaomingxi_list: {
          hanghao: '',
          weight: "",
          status: "",
          danjubianhao: "",
          zongbumingcheng: "",
          fendian: "",
          leikumingcheng: "",
          shuliang: "",
          id: ""
        },
        quanxianshenhe: false,
        delete_Features: false,
        edit_Features: false,
        chuangdanren: ""
      }
    },
    store,
    //页面加载时获取商品拆料列表
    created() {
      this.loading_chailiaolist = true;
      this.$axios.get(this.$api.commodity_material.Material_list).then((res) => {
        if (res.data.tableData) {
          let datas = JSON.parse(localStorage.getItem('tableData'));
          for (let i = 0; i < datas.length; i++) {
            if (datas[i].status === "已通过") {
              this.shenpi_id.push(i + 1);
            }
          }
          // console.log(datas);
          this.tableData = datas;
          this.loading_chailiaolist = false;
        }
      });
      this.anniu_quanxian();
    },

    methods: {
      addData() {
        let data = {
          id: 1
        };
        this.$axios.post(this.$api.commodity_material.test, data,
          {
            transformRequest: [
              function (data) {
                let params = "";
                var arr = [];
                for (var key in data) {
                  arr.push(key + "=" + data[key]);
                }
                params = arr.join("&");
                return params;
              }
            ]
          }, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
          console.log(res);
        });
      },

      //获取审核按钮权限
      anniu_quanxian() {
        //每个页面id固定,每次加载时根据用户列表信息里的id来查找是否用户此功能
        // //审核权限
        this.quanxianshenhe = this.$store.state.user.menuInfo.havePower[0].children[1].have;
        // //删除权限
        this.delete_Features = this.$store.state.user.menuInfo.havePower[0].children[3].have;
        // //编辑权限
        this.edit_Features = this.$store.state.user.menuInfo.havePower[0].children[2].have;
      },

      //获取列表数据
      // getIndexList() {
      //   // this.loading_chailiaolist = true;
      //   this.$axios.post("http://172.16.6.69:8080/power/findByRole", {
      //       id: 1
      //     },
      //     {
      //       transformRequest: [
      //         function (data) {
      //           let params = "";
      //           var arr = [];
      //           for (var key in data) {
      //             arr.push(key + "=" + data[key]);
      //           }
      //           params = arr.join("&");
      //           return params;
      //         }
      //       ]
      //     }, {
      //       headers: {
      //         'Content-Type': 'application/x-www-form-urlencoded'
      //       }
      //     }).then((res) => {
      //     console.log(res);
      //   });
      // },

      handleSizeChange(val) {
        this.pageSize = val;
        // console.log(`每页 ${val} 条`);
        //每次动态更新条数
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(111 + "当前第:" + val);
      },

      //-创建商品中的选择拆料点击后显示的商品库存统计列表
      handleSizeChange1(val) {
        this.pageSize1 = val;
        // console.log(`每页 ${val} 条`);
        //每次动态更新条数
      },

      //查询商品分页获取当前页
      handleCurrentChange1(val) {
        this.currentPage1 = val;
      },

      //创建拆料
      create_chailiao() {
        //将数据清空,方便创建拆料查询商品使用
        this.leixing_value = this.chukumendian_val = this.chukuguitai_val = "";
        //隐藏首页数据显示,并且展示商品统计页面数据,并且显示商品统计的分页div
        this.material_list = false;
        this.chaxun = false;
      },

      //测试
      dianji(data) {
        console.log(data)
      },
      //撤消驳回提示框
      chexiao_open(scope_row_id) {
        this.$confirm('是否撤消驳回?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.chexiao_bohui(scope_row_id);
          this.$message({
            type: 'success',
            message: '已撤销驳回!',
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });
        });
      },

      //删除提示框
      shanchu_open(scope_row_id) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {

          this.tableData_del(scope_row_id);
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          });
        });
      },

      //创建拆料中点击选择拆料
      select_chailiao() {
        let canshu = {
          leixing_value: this.leixing_value,
          chukumendian_val: this.chukumendian_val,
          chuangdanriqi: this.chuangdanriqi,
          danjubianhao: this.danjubianhao
        };
        // 参数直接加载下面  改为post请求
        // loading加载框
        if (this.leixing_value.length != 0 && this.chukumendian_val.length != 0) {
          this.loading = true;
          let addDatas = JSON.parse(localStorage.getItem('addDatas'));
          let arr = [];
          for (let i = 0; i < addDatas.length; i++) {
            // console.log(datas[i].zongbumingcheng==this.chukumendian_val);
            if (addDatas[i].leikumingcheng == this.leixing_value && addDatas[i].zongbumingcheng == this.chukumendian_val
              && addDatas[i].guitai == this.chukuguitai_val
            ) {
              arr.push(addDatas[i]);
            }
          }
          this.loading = false;
          this.kucuntongji = arr;

          // this.$axios.get(this.$api.commodity_material.Material_list).then((res) => {
          //   if (res.data.kucuntongji) {
          //     this.kucuntongji = res.data.kucuntongji;
          //     this.loading = false;
          //   }
          // });
          this.chailiao_click_kucunshow = true;
        }
      },

      //完成拆料按钮
      wancheng_chailiao() {
        let addDatas = JSON.parse(localStorage.getItem('addDatas'));
        let datas = JSON.parse(localStorage.getItem('tableData'));
        if (this.tongji_multipleSelection.length > 0) {
          for (let i = 0; i < this.tongji_multipleSelection.length; i++) {
            this.tableData.push(this.tongji_multipleSelection[i]);
            datas.push(this.tongji_multipleSelection[i]);
            let index = addDatas.findIndex((item) => {
              return item.id == this.tongji_multipleSelection[i].id;
            });
            addDatas.splice(index, 1);
            localStorage.setItem("tableData", JSON.stringify(datas));
            localStorage.setItem("addDatas", JSON.stringify(addDatas));
            this.chailiao_click_kucunshow = false;
            this.material_list = true;
          }
        }else {
          this.chailiao_click_kucunshow = false;
          this.material_list = true;
        }
        this.tongji_multipleSelection=[];
      },

      //获取选中数组
      chailiao_changeFun(val) {
        let new_list = [];
        if (val.length > 0) {
          for (let i = 0; i < val.length; i++) {
            new_list.push(val[i].id);
          }
        }
        this.multipleSelection = new_list;
      },

      //选择拆料内的获取选中的数组
      tongji_chailiao_changeFun(val) {
        // console.log(val);
        this.tongji_multipleSelection = val;
      },

      //编辑时获取当前行的id
      handleClick_edit(row) {
        this.form = row;
      },

      //审批时获取当前行id
      handleClick_shenpi(row) {
        // console.log(row);
        this.shenpi = row;
      },

      // 关闭编辑弹窗方法
      closeTanChuang_edit() {
        this.dialogFormVisible = false;
      },
      //打开编辑弹窗
      openTanChuang_edit() {
        this.dialogFormVisible = true;
      },
      //拆料明细弹窗
      openTanChuang_mingxi() {
        this.dialogFormVisible_mingxi = true;
      },
      //关闭拆料明细弹窗
      closeChuang_mingxi() {
        this.dialogFormVisible_mingxi = false;
      },
      // 关闭审批弹窗方法
      closeTanChuang_shenpi() {

        this.dialogFormVisible_shenpi = false;
      },
      //打开审批弹窗
      openTanChuang_shenpi() {
        this.dialogFormVisible_shenpi = true;
      },

      //审批通过
      shenpi_tongguo(id) {
        //1.将当前数据发送到后台,修改商品审批状态
        //2.前台将审核按钮变成禁用,并且删除按钮变为查看详情
        //动态生成
        this.shenpi_id.push(id);
        // console.log(this.shenpi_id);
        //页面将状态改为已通过
        let index = this.tableData.findIndex(function (item) {
          return item.id == id
        });
        let datas = JSON.parse(localStorage.getItem('tableData'));
        datas[index].status = "已通过";
        localStorage.setItem("tableData", JSON.stringify(datas));
        this.tableData[index].status = "已通过"
      },

      //审批页面的驳回
      shenpi_bohui(id) {
        //动态生成 created中生成
        this.chexiao_shenpi_id.push(id);
        // console.log(this.chexiao_shenpi_id);
        let index = this.tableData.findIndex(function (item) {
          return item.id == id
        });
        this.tableData[index].status = "驳回"
      },

      //撤消驳回
      chexiao_bohui(id) {
        let index = this.chexiao_shenpi_id.indexOf(id);
        this.chexiao_shenpi_id.splice(index, 1);
        let chexiao_index = this.tableData.findIndex(function (item) {
          return item.id == id
        });
        this.tableData[chexiao_index].status = "待审核"
      },
      //删除方法
      tableData_del(id) {
        console.log(id);
        let index = this.tableData.findIndex(function (item) {
          return item.id == id
        });
        let datas = JSON.parse(localStorage.getItem('tableData'));
        datas.splice(index, 1);
        localStorage.setItem("tableData", JSON.stringify(datas));
        this.tableData.splice(index, 1);
      },

      search() {
        //搜索栏显示,同时将创建栏隐藏
        this.chaxun = true;
        this.material_list = true;
        this.chailiao_click_kucunshow = false;
      },

      //点击搜索
      click_sreach() {
        //获取到用户搜索数据,向后台请求将tableDate数据换成请求回来的数据,点击收起将数据还原为初始状态
        let data = {
          shangpingleixing: this.leixing_value,
          chukumendian: this.chukumendian_val,
          chukuguitai: this.chukuguitai_val,
          chuangdanren: this.chuangdanren
        };
        let datas = JSON.parse(localStorage.getItem('tableData'));
        let arr = [];
        for (let i = 0; i < datas.length; i++) {
          // console.log(datas[i].zongbumingcheng==this.chukumendian_val);
          if (datas[i].leikumingcheng == this.leixing_value && datas[i].zongbumingcheng == this.chukumendian_val
            && datas[i].guitai == this.chukuguitai_val
          ) {
            arr.push(datas[i]);
          }
        }
        localStorage.setItem("tableData", JSON.stringify(datas));
        //发起请求获取数据
        this.loading_chailiaolist = true;
        this.$axios.get(this.$api.commodity_material.Material_list).then((res) => {
          if (res.data.tableData) {
            this.tableData = arr;
            this.loading_chailiaolist = false;
          }
        });
      },
      //点击收起,搜索栏隐藏
      click_shouqi() {
        this.loading_chailiaolist = true;
        let datas = JSON.parse(localStorage.getItem('tableData'));
        for (let i = 0; i < datas.length; i++) {
          if (datas[i].status === "已通过") {
            this.shenpi_id.push(i + 1);
          }
        }
        this.tableData = datas;
        this.loading_chailiaolist = false;
        this.chaxun = false;
        //将数据清空,方便创建拆料查询商品使用
        this.leixing_value = this.chukumendian_val = this.chukuguitai_val = "";
      },
      //编辑确认按钮
      queren_edit() {
        //获取到当前from,将数据提交到后台,前台可使用静态修改,减少不必要的数据请求
        let data = this.form;
        let id = this.form.id;
        // console.log(data);
        let index = this.tableData.findIndex(function (item) {
          return item.id == id;
        });
        let datas = JSON.parse(localStorage.getItem('tableData'));
        datas[index] = data;
        localStorage.setItem("tableData", JSON.stringify(datas));
        this.tableData[index] = data;
      },
      //  拆料明细
      chailiaomingxi() {

      },

      getPageData() {
        console.log(1);
      }
    }
  }


  //  拆料编辑功能(审核)  拆料删除(批量删除)  查询
</script>

<style scoped>
  .box {
    background-color: #f6f6f6;
    width: 85%;
    min-height: 600px;
  }

  .box td {
    padding: 8px 0;
  }

  .table_pad {
    margin-left: 20px;
    margin-top: 20px;
  }

  .permission_text {
    font-size: 30px;
    padding-top: 20px;
    padding-left: 15px;
  }

  .subhead {
    font-size: 24px;
  }

  .line {
    margin-top: 10px;
    margin-bottom: 30px;
    border-top: 1px solid #DADADA;
  }

  .Breadcrumb {
    font-size: 12px;
    margin-top: 10px;
    margin-left: 10px;
    color: #999999;
  }

  .Breadcrumb span {
    margin-left: 10px;
  }

  .Breadcrumb span:nth-of-type(1) {
    color: #3380FF;
  }

  .button-area {
    padding-left: 10px;
    margin-bottom: 10px;
  }

  .select h2 {
    font-size: 18px;
    font-weight: 400;
    margin-left: 5px;
  }

  .select table {
    width: 100%;
  }

  .select td {
    width: 17%;
    height: 40px;
    /*border: 1px solid red;*/
  }

  .select select {
    width: 100px;
    height: 20px;
  }

  /* .select_chailiao:hover {
     background-color: #66b1ff;
   }*/

  .wancheng_chailiao:hover {
    background-color: #85ce61;
  }

  .wancheng_chailiao {
    background-color: #67c23a;
  }

  .table-area {
    margin-top: 10px;
  }

  .shenpi_td_jian {
    width: 70px;
    text-align: right;
    font-size: 14px;
    color: #8C8B8D;
  }

  .shenpi tr > td {
    padding-left: 22px;
  }

  .shenpi_td_zhi {
    width: 110px;
    padding-left: 15px;
    font-size: 16px;
  }
</style>
